import React, { memo } from 'react'
import { NavBar, TabBar } from 'antd-mobile'
import {
 
  useLocation,
  useNavigate,
} from 'react-router-dom'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
const Bottombar = memo(() => {
    const location = useLocation()
    const { pathname } = location
    const navigate=useNavigate()
  
    const tabs = [
        {
          key: '/Home',
          title: '首页',
          icon: <AppOutline />,
        },
        {
          key: '/Ding',
          title: '楼层 ',
          icon: <UnorderedListOutline />,
        },
        {
          key: '/Shouye',
          title: '消息',
          icon: <MessageOutline />,
        },
        {
          key: '/Wode',
          title: '我的',
          icon: <UserOutline />,
        },
      ]
      const tab=[
        {
          key: '/Home',
          title: '首页',
          icon: <AppOutline />,
        },
       
        {
          key: '/Shouye',
          title: '消息',
          icon: <MessageOutline />,
        },
        {
          key: '/Wode',
          title: '我的',
          icon: <UserOutline />,
        },
      ]
      const res=tab.find(item=>pathname.includes(item.key))
      console.log(res);
  return (
    <div>
       {res? <TabBar activeKey={pathname} onChange={value =>navigate(value) }>
      {tabs.map(item => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>:''}
    </div>
  )
})

export default Bottombar